<template>
	<view>
		<view class="container" v-if="!loading">
			<view class="main" v-if="goodsList.length">
				<view class="nav">
					<view class="header_top" :style="{height:imgHeight + 40 + 'px'}">
						<!-- <view class="search_img" @click="back">
							<image src="../../static/logo_shop.jpg"></image>
						</view>
						<text>点餐</text> -->
						<view class="imgBox">
							<image  src="../../static/images/menu/banner.jpg" mode="widthFix" style="width: 100vw;opacity: 0.85"></image>
							<view class="imgMark">
								<view class="imgLeft">
									<image src="../../static/mine_1.png" @click="back"></image>
								</view>
								<view class="imgRight">
									<image src="../../static/mine_2.png" @click="toUrl('/pages/menu/serach?id='+ hllId + '&shopId='+shopId)"></image>
									<!-- <image src="../../static/mine_2.png"></image> -->
									<image src="../../static/mine_3.png"></image>
								</view>
							</view>
						</view>
						<view class="topBox">
							<text>{{seller.shopName}}</text>
							<a>月售2000+</a>
							<image :src="seller.shopImage"></image>
						</view>
					</view>
					
				</view>
				<view class="content">
					<scroll-view class="menus" :scroll-into-view="menuScrollIntoView" :scroll-with-animation='true' scroll-y>
						<view class="wrapper">
							<view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id === currentCateId}"
								v-for="(item, index) in goodsList" :key="index" @tap="handleMenuTap(item.id)">
								<text>{{ item.categoryName }}</text>
								<view class="dot" v-show="menuCartNum(item.id)">{{ menuCartNum(item.id) }}</view>
							</view>
						</view>
					</scroll-view>
					<!-- goods list begin -->
					<scroll-view class="goods" :scroll-with-animation='true' scroll-y :scroll-top="cateScrollTop"
						@scroll="handleGoodsScroll">
						<view class="wrapper">

							<view class="list">
								<!-- category begin -->
								<view class="category" v-for="(item, index) in goodsList" :key="index"
									:id="`cate-${item.id}`">
									<view class="title">
										<text>{{ item.categoryName }}</text>
									</view>
									<view class="items">
										<!-- 商品 begin -->
										<block v-if="skeletonLoading">
											<view class="good" v-for="(item, i) in skeletonList">
												<u-skeleton :animate="true" rows="1" title loading avatar
													avatarShape='square' avatarSize='60'></u-skeleton>
											</view>
										</block>
										<block v-else>
											<view class="good" v-for="(good, key) in item.foodList" :key="key">
												<view class="image" v-if="good.imgePath">
													<u-lazy-load border-radius='10' :image="good.imgePath"  height='180'
														img-mode="aspectFill" :duration='300' style="width: 180rpx !important;"></u-lazy-load>
												</view>
												<image src="../../static/null.jpg" class="image" mode="aspectFill" v-else ></image>
												<view :class="good.foodName!=='温馨提示'?'right':'price_and_tip'">
													<text class="name">{{ good.foodName }}</text>
													<text class="tips">{{ good.clickAlertMess }}</text>
													<view class="price_and_action" v-if="good.foodName!=='温馨提示'">
														<view class="">
															<text style="color: rgb(252,31,31);">¥</text>
															<text class="price">{{ good.price }}</text>
															<!-- <text style="color:rgb(153,153,153)">份</text> -->
														</view>
														<view class="btn-group" v-if="Number(good.skuNums) > 1 || (good.tasteGroupList && good.tasteGroupList != '[]')">
															<button type="primary" class="btn property_btn"
																hover-class="none" size="mini"
																@tap="showGoodDetailModal(item, good,0)">
																选规格
															</button>
															<view class="dot" v-show="goodCartNum(good.foodId)">
																{{ goodCartNum(good.foodId) }}</view>
														</view>
														<view class="btn-group" v-else>
															<button type="default" v-show="goodCartNum(good.foodId)" plain
																class="btn reduce_btn" size="mini" hover-class="none"
																@tap="handleReduceFromCart(item, good)">
																<view class="iconfont iconsami-select"></view>
															</button>
															<view class="number" v-show="goodCartNum(good.foodId)">
																{{ goodCartNum(good.foodId) }}</view>
															<button type="primary" class="btn add_btn" size="min"
																hover-class="none"
																@tap="showGoodDetailModal(item, good,1)">
																<view class="iconfont iconadd-select"></view>
															</button>
														</view>
													</view>
												</view>
											</view>
										</block>

										<!-- 商品 end -->
									</view>
								</view>
								<!-- category end -->
							</view>
						</view>
					</scroll-view>
					<!-- goods list end -->
				</view>
				<!-- content end -->
				<!-- 购物车栏 begin -->
				<view class="cart-box">
					<view class="mark">
						<image src="../../static/cart.png" class="cart-img" @tap="openCartPopup"
							:class="addCart?'imgAnimation':''"></image>
						<view class="tag">{{ getCartGoodsNumber }}</view>
					</view>
					<view class="price">
						<view>
							<text class="iconText">¥</text>
							<a v-if="cart.length>0">{{Number(getCartGoodsPrice).toFixed(2)}} </a>
							<a v-else>0</a>
						</view>
						<view class="deliveryFee" v-if="cart.length>0">
							配送费{{minDeliveryFee}}元
						</view>
						
						
					</view>
					<button type="primary" class="pay-btn" @tap="toPay" :disabled="disabledPay">
						{{ disabledPay ? `差${spread}元起送` : '去结算' }}
					</button>
					<!-- <button type="primary" class="pay-btn" @tap="toPay" >
						去结算
					</button> -->
				</view>
				<!-- 购物车栏 end -->
			</view>
			<!-- 商品详情模态框 begin -->
			<u-popup v-model="goodDetailModalVisible"  mode="bottom">
				<view style="80vh" class="good-detail-modal">
					<view class="cover">
						<image  :src="good.imgePath || '../../static/null.jpg'" class="image"></image>
						<view class="">
							<view class="name" style="margin-bottom: 30px;font-size: 18px;">{{ good.foodName }}</view>
							<text style="color: rgb(252,31,31);font-weight: bold;">¥</text>
							<text class="price" v-if="units.length==1">{{ units[0].price }}<text class="priceTip">{{units[0].unit}}</text></text>
							<text class="price" v-if="units.length>1">{{ showUnits.price }}<text class="priceTip">{{showUnits.unit}}</text></text>
						</view>
						<view class="btn-group">
							<image src="/static/images/menu/close.png" @tap="closeGoodDetailModal"></image>
						</view>
					</view>
					<scroll-view class="detail" scroll-y>
						<view class="wrapper">
							<view class="basic" v-if=" good.clickAlertMess">
								<view class="tips">{{ good.clickAlertMess }}</view>
							</view>
							<!-- 规格选择 -->
							<view class="properties" v-if="units.length>1">
								<view class="property">
									<view class="title">
										<text class="name">规格</text>
									</view>
									<view class="values">
										<view class="value"  v-for="(item, index) in units" :key="index"
											:class="{'default': item.is_default}"
											@tap="changePropertyDefault(index,item)">
											{{ item.unit }}
										</view>
									</view>
								</view>
							</view>
							<!-- 备注选择 -->
							<view class="properties" v-if="tasteGroupList">
								<view class="property" v-for="(item, index) in tasteGroupList" :key="index">
									<view class="title">
										<text class="name">{{ item.groupName }}</text>
									</view>
									<view class="values">
										<view class="value" v-for="(value, key) in item.detailList" :key="key"
											:class="{'default': value.isDefault == '1'}"
											@tap="changeGroupDefault(index, key)">
											{{ value.notesName }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="action">
						<view class="left">
							<view class="price" v-if="units.length==1">￥{{ units[0].price }}</view>
							<view class="price" v-if="units.length>1">￥{{ showUnits.price }}</view>
							
						</view>
						<view class="btn-group">
							<button type="default" plain class="btn" size="mini" hover-class="none"
								@tap="handlePropertyReduce">
								<view class="iconfont iconsami-select"></view>
							</button>
							<view class="number">{{ good.number }}</view>
							<button type="primary" class="btn" size="min" hover-class="none" @tap="handlePropertyAdd">
								<view class="iconfont iconadd-select"></view>
							</button>
						</view>
					</view>
					<view class="add-to-cart-btn" @tap="handleAddToCartInModal">
						<view>加入购物车</view>
					</view>
				</view>
			</u-popup>

			<!-- 商品详情模态框 end -->
			<!-- 购物车详情popup -->
			<popup-layer direction="top" :show-pop="cartPopupVisible" class="cart-popup">
				<template slot="content">
					<view class="top">
						<text>包装费 ￥{{Number(getCartPackagingFee).toFixed(2)}}</text>
						<text @tap="handleCartClear">清空</text>
					</view>
					<scroll-view class="cart-list" scroll-y>
						<view class="wrapper">
							<view class="item" v-for="(item, index) in cart" :key="index">
								<view class="left">
									<view class="name">{{ item.name }}</view>
									<view class="props">{{ item.showUnit }} {{ item.showGroup }}</view>
								</view>
								<view class="center">
									<text>￥{{ item.price }}</text>
								</view>
								<view class="right">
									<button type="default" plain size="mini" class="btn" hover-class="none"
										@tap="handleCartItemReduce(index)">
										<view class="iconfont iconsami-select"></view>
									</button>
									<view class="number">{{ item.number }}</view>
									<button type="primary" class="btn" size="min" hover-class="none"
										@tap="handleCartItemAdd(index)">
										<view class="iconfont iconadd-select"></view>
									</button>
								</view>
							</view>
							
						</view>
					</scroll-view>
				</template>
			</popup-layer>
			<!-- 购物车详情popup -->
		</view>

		
	</view>
</template>

<script>
	import modal from '@/components/modal/modal'
	import popupLayer from '@/components/popup-layer/popup-layer'

	export default {
		components: {
			modal,
			popupLayer
		},
		data() {
			return {
				goods: [], //所有商品
				goodsList:[],
				units: [],//弹框规格列表
				chooseNum: 1,
				ads: [{
						image: require("@/static/images/menu/one.jpg")
					},
					{
						image: require("@/static/images/menu/two.jpg")
					},
				],
				loading: false,
				currentCateId: 0, //默认分类
				cateScrollTop: 0.1,
				menuScrollIntoView: '',
				cart: [], //购物车
				goodDetailModalVisible: false, //是否餐品详情模态框
				good: {}, //当前餐品
				category: {}, //当前餐品所在分类
				cartPopupVisible: false,
				sizeCalcState: false,
				skeletonLoading: true,
				addCart: false,
				skeletonList: ['', '', '', '', '', '', ],
				tasteGroupList:null,//备注列表
				showUnits:{},//选中规格
				group:'',//选择备注
				showGroup:'',//展示选择备注
				clickFlag:false,//防重复点击
				shopId:'',//商家id
				minCost:0,//起送价
				minDeliveryFee:0,//配送费
				seller:{},//商家信息
				imgHeight:0,
				hllId:0,
			}
		},
		async onLoad(e) {
			this.shopId = e.shopId
			this.hllId = e.id
			this.$wxHide()
			this.getData(e.id)
			this.getShop()
			var windowWidth = 0;
			var windowHeight = 0;
			uni.getSystemInfo({
			    success: function (res) {
			       windowWidth =  res.windowWidth;
				   windowHeight = res.windowHeight
			    }
			});
			this.imgHeight = (windowWidth / 1000) * 173;
			
			
		},
		onShow() {
			var cart = uni.getStorageSync('cart')
			if(cart){
				uni.showLoading({
					title:'加载中'
				})
				this.cart = uni.getStorageSync('cart')
				uni.hideLoading()
			}
		},
		computed: {
			
			
			goodCartNum() { //计算单个餐品添加到购物车的数量
				return (id) => this.cart.reduce((acc, cur) => {
					if (cur.id === id) {
						return acc += cur.number
					}
					return acc
				}, 0)
			},
			menuCartNum() {
				return (id) => this.cart.reduce((acc, cur) => {
					if (cur.cate_id === id) {
						return acc += cur.number
					}
					return acc
				}, 0)
			},
			getCartGoodsNumber() { //计算购物车总数
				return this.cart.reduce((acc, cur) => acc + cur.number, 0)
			},
			getCartGoodsPrice() { //计算购物车总价
			    if(this.cart.length == 0){
					return  0
				}else{
					var price = Number(this.cart.reduce((acc, cur) => acc + cur.number * cur.price + cur.number * cur.takeoutPackagingFee, 0))
					return  Number(this.minDeliveryFee) + price
				}
			},
			getCartPackagingFee() { //计算购物车打包费
				return this.cart.reduce((acc, cur) => acc + cur.number * cur.takeoutPackagingFee, 0)
			},
			disabledPay() { //是否达到起送价
				return  (this.getCartGoodsPrice < this.minCost) ? true : false
			},
			spread() { //差多少元起送
				return parseFloat((this.minCost - this.getCartGoodsPrice).toFixed(2))
			}
		},
		methods: {
			
			
			// async init() { //页面初始化
			// 	this.loading = true
			// 	await this.getStore()
			// 	this.goods = await this.$api('goods')
			// 	this.loading = false
			// 	this.cart = uni.getStorageSync('cart') || []
			// },
			
			//查询商家配送费等信息
			getShop(){
				var that = this;
				that.uni_request({
					url: '/api/shop/' + this.shopId,
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							that.minCost = res.data.data.minCost;
							that.minDeliveryFee = res.data.data.minDeliveryFee;
							that.seller = res.data.data;
							
						} 
					},
					fail(e){
						uni.hideLoading()
					},
				})
			},
			//获取数据
			getData(id) {
				var that = this;
				uni.showLoading({
					mask:true,
					title:'加载中'
				})
				that.uni_request({
					url: '/api/food/shopFoodList/' + id,
					method: 'POST',
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							var data = res.data.data
							for (var i = 0; i < data.length; i++) {
								data[i].id = i
								that.goodsList.push(data[i])
							}
							that.skeletonLoading = false;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(function() {
								uni.navigateBack(1)
							}, 1000);
						}
					},
					fail(e) {
						uni.hideLoading()
					}
				})
			},
			back() {
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//选择规格
			chooseSku(index, i, item) {
				this.skus[index] = item
				this.$forceUpdate()

			},
			
			handleMenuTap(id) { //点击菜单项事件
				if (!this.sizeCalcState) {
					this.calcSize()
				}
				this.currentCateId = id
				this.$nextTick(() => this.cateScrollTop = Number(this.goodsList.find(item => item.id == id).top + 5))
			},
			handleGoodsScroll({
				detail
			}) { //商品列表滚动事件
				if (!this.sizeCalcState) {
					this.calcSize()
				}
				const {
					scrollTop
				} = detail
				let tabs = this.goodsList.filter(item => item.top <= scrollTop).reverse()
				if (tabs.length > 0) {
					this.currentCateId = tabs[0].id
				}
			},
			calcSize() {
				let h = 10

				let view = uni.createSelectorQuery().select('#ads')
				view.fields({
					size: true
				}, data => {
					h += Math.floor(data.height)
				}).exec()

				this.goodsList.forEach(item => {
					let view = uni.createSelectorQuery().select(`#cate-${item.id}`)
					view.fields({
						size: true
					}, data => {
						item.top = h
						h += data.height
						item.bottom = h
					}).exec()
				})
				this.sizeCalcState = true
			},
			//遍历数组 整合所选备注
			checkGroup(){
				for (var k = 0; k < this.tasteGroupList.length; k++) {
					if(this.tasteGroupList[k].isChoose.length>0){
						var data = {}
						data.isChoose = this.tasteGroupList[k].isChoose;
						data.groupName = this.tasteGroupList[k].groupName
						if(this.group.length>0){
							this.group = this.group + ';' + data.groupName + ':' + data.isChoose 
							this.showGroup = this.showGroup + ',' +  data.isChoose 
						}else{
							this.group = data.groupName + ':' + data.isChoose 
							this.showGroup = data.isChoose 
						}
					}
				}
			},
			async handleAddToCart(cate, good, num) { //添加到购物车
				//遍历数组 整合所选备注
				if(Number(good.skuNums) > 1 || (good.tasteGroupList && good.tasteGroupList != '[]')){
					await this.checkGroup()
				}
				var that = this;
				//判断购物车中已有餐品
				const index = that.cart.findIndex(item => {
					// if (that.group.length>0) {
					// 	//有备注属性情况
					// 	return (item.id === good.foodId) && (item.group === String(that.group)) && (item.unitKey === that.showUnits.unitKey)
					// } else {
					// 	//无备注属性情况
					// 	return item.id === good.foodId && (item.unitKey === that.showUnits.unitKey)
					// }
					return (item.id === good.foodId) && (item.group === String(that.group)) && (item.unitKey === that.showUnits.unitKey)
				})
				if (index > -1) {
					that.cart[index].number += num
					uni.setStorageSync('cart', JSON.parse(JSON.stringify(that.cart)))
				} else {
					that.addCart = true
					that.cart.push({
						id: good.foodId,
						cate_id: cate.id,
						name: good.foodName,
						price: good.price,
						number: num,
						image: good.imgePath,
						group:String(that.group),
						showGroup:String(that.showGroup),
						showUnit:String(that.showUnits.unit),
						unitKey:that.showUnits.unitKey,
						takeoutPackagingFee:good.takeoutPackagingFee,
					})
					that.group = '';
					that.showGroup = '';
					that.showUnits = {};
					uni.setStorageSync('cart', JSON.parse(JSON.stringify(that.cart)))
					setTimeout(function() {
						that.addCart = false
						
					}, 500);
					
				}
			},
			handleReduceFromCart(item, good) {
				const index = this.cart.findIndex(item => item.id === good.foodId)
				this.cart[index].number -= 1
				if (this.cart[index].number <= 0) {
					this.cart.splice(index, 1)
				}
				uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
			},
			
			//点击选规格 调用详情 
			showGoodDetailModal(item, good,type) {
				var that = this
				if(that.clickFlag){
					return
				}
				that.clickFlag = true;
				that.group = '';
				that.showGroup = '';
				that.uni_request({
					url: '/api/food/' + good.foodId,
					method: 'POST',
					success: (res) => {
						that.clickFlag = false;
						if (res.data.code == 0 || res.data.code == 200) {
							var data = res.data.data
							that.units = data.units
							that.good = JSON.parse(JSON.stringify({
								...data,
								number: 1
							}))
							that.category = JSON.parse(JSON.stringify(item))
							
							if(that.units.length>1){
								//设置默认选中规格 多规格时弹出选择弹框
								for (var i = 0; i < that.units.length; i++) {
									if(i == 0){
										that.units[i].is_default = 1
										that.showUnits = that.units[i]
									}else{
										that.units[i].is_default = 0
									}
								}
								that.goodDetailModalVisible = true
							}else{
								//设置默认选中规格 单规格时判断备注属性弹出选择弹框
								that.showUnits = that.units[0]
								that.good.price = that.showUnits.price
								if(type == 0){
									that.goodDetailModalVisible = true
								}else{
									that.handleAddToCart(that.category,that.good,1)
								}
								
							}
							//解析辅料备注数组
							if(that.good.tasteGroupList && that.good.tasteGroupList!='[]'){
								that.tasteGroupList = JSON.parse(JSON.parse(JSON.stringify(that.good.tasteGroupList)))
								//辅料备注数组新增选中属性 用于订单提交数组整合
								for (var k = 0; k < that.tasteGroupList.length; k++) {
									that.tasteGroupList[k].isChoose = ''
								}
								that.goodDetailModalVisible = true
							}else{
								that.tasteGroupList = [];
							}
							
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail(e) {
						that.clickFlag = false;
						
					}
				})
				
				
			},
			closeGoodDetailModal() { //关闭餐品详情模态框
				this.goodDetailModalVisible = false
				this.category = {}
				this.good = {}
			},
			//选择备注属性
			changeGroupDefault(index,i){
				if(this.tasteGroupList[index].detailList[i].isDefault == 0){//未选中点击
					this.tasteGroupList[index].detailList[i].isDefault = '1';
					this.tasteGroupList[index].isChoose = [];
					for (var k = 0; k < this.tasteGroupList[index].detailList.length; k++) {
						if(this.tasteGroupList[index].detailList[k].isDefault == '1'){
							this.tasteGroupList[index].isChoose.push(this.tasteGroupList[index].detailList[k].notesName)
						}
					}
				}else{//已选中点击
					this.tasteGroupList[index].detailList[i].isDefault = '0';
					this.tasteGroupList[index].isChoose = '';
				}
				
			},
			changePropertyDefault(index) { //改变默认属性值
				for (var i = 0; i < this.units.length; i++) {
					this.units[i].is_default = 0
				}
				this.units[index].is_default = 1
				this.showUnits = this.units[index]
				this.good.number = 1
				this.$forceUpdate()
			},
			getGoodSelectedProps(good, type = 'text') { //计算当前餐品所选属性
				if (good.use_property) {
					let props = []
					good.property.forEach(({
						values
					}) => {
						values.forEach(value => {
							if (value.is_default) {
								props.push(type === 'text' ? value.value : value.id)
							}
						})
					})
					return type === 'text' ? props.join('，') : props
				}
				return ''
			},
			handlePropertyAdd() {
				this.good.number += 1
			},
			handlePropertyReduce() {
				if (this.good.number === 1) return
				this.good.number -= 1
			},
			handleAddToCartInModal(item) {
				const product = this.good;
				if(this.good.units.length==1){
					product.price = this.good.units[0].price
				}else{
					product.price = this.showUnits.price
				}
				this.handleAddToCart(this.category, product, this.good.number)
				this.closeGoodDetailModal()

			},
			 //打开/关闭购物车列表popup
			openCartPopup() {
				this.cartPopupVisible = !this.cartPopupVisible
			},
			 //清空购物车
			handleCartClear() {
				uni.showModal({
					title: '提示',
					content: '确定清空购物车么',
					success: ({
						confirm
					}) => {
						if (confirm) {
							this.cartPopupVisible = false
							this.cart = []
							uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
						}
					}
				})
			},
			handleCartItemAdd(index) {
				this.cart[index].number += 1
				uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
			},
			handleCartItemReduce(index) {
				if (this.cart[index].number === 1) {
					this.cart.splice(index, 1)
				} else {
					this.cart[index].number -= 1
				}
				if (!this.cart.length) {
					this.cartPopupVisible = false
				}
				uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
			},
			
			toUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			
			toPay() {
				if (this.getCartGoodsPrice <= 0) {
					uni.showToast({
						title: '请选择餐品~',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '加载中'
				})
				
				
				uni.navigateTo({
					url: '/pages/pay/pay?data='+ JSON.stringify(this.cart)+'&shopId='+this.shopId
				})
				uni.removeStorageSync('cart')
				this.cart = [];
				uni.hideLoading()
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '~@/pages/menu/menu.scss';

	page {
		background: rgba(103, 54, 28, 0.05) !important;
	}

	.imgAnimation {
		animation: shake2 0.5s;
	}

	.btnAct {
		color: rgba(141, 74, 50, 0.9);
		border: 1px solid rgba(141, 74, 50, 0.9);
		background: rgba(141, 74, 50, 0.15) !important;
	}
	.imgBox{
		position: relative;
		.imgMark{
			display: flex;align-items: center;justify-content: space-between;
			position: absolute;top: 0;width: 100vw;padding: 10px;
			.imgLeft{
				image{width: 20px;height: 20px;}
			}
			.imgRight{
				image{width: 25px;height: 25px;margin-left: 20px;}
			}
		}
		
	}
	.topBox{
		width: 100vw;display: flex;align-items: flex-start;flex-direction: column;
		padding: 5px 15px;position: absolute;z-index: 9;background: #fff;bottom: 0;
		border-radius: 15px 15px 0 0;
		text{
			color: #000;font-size: 20px !important;letter-spacing: 1px;font-weight: bold;
		}
		a{color: #999;font-size: 13px !important;}
		image{
			width: 60px;height:60px;border-radius: 8px;position: absolute;
			right: 10px;top: -10px;
		}
		
	}
</style>